<template>
	<view class="profile-page u-p-20">
		<!-- 头像部分 -->
		<view class="avatar-section u-flex u-row-center u-m-b-20">
			<u-image :src="userInfo.avatarUrl" width="200" height="200" shape="circle" @click="chooseAvatar"></u-image>
		</view>
		<view style="text-align: center;">
			{{userInfo.userId}}
		</view>

		<!-- 表单信息 -->
		<u-form :model="form" ref="formRef" label-position="left" label-width="180">
			<u-form-item label="用户昵称" prop="nickname">
				<u-input v-model="userInfo.nickname" placeholder="请输入用户昵称"></u-input>
			</u-form-item>

			<u-form-item label="性别" prop="gender">
				<u-radio-group v-model="userInfo.gender">
					<u-radio name="1">男</u-radio>
					<u-radio name="0">女</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="手机号码" prop="phoneNumber">
				<u-input v-model="userInfo.phoneNumber" placeholder="请输入手机号码"></u-input>
			</u-form-item>

			<u-form-item label="个人介绍" prop="userInfo">
				<u-input v-model="userInfo.userInfo" placeholder="请输入用户介绍"></u-input>
			</u-form-item>

			<u-form-item label="最后登录时间" prop="lastLoginTime">
				<u-input v-model="userInfo.lastLoginTime" disabled></u-input>
			</u-form-item>
		</u-form>

		<!-- 提交按钮 -->
		<view class="u-m-t-30">
			<u-button text="保存信息" @click="submitForm">保存信息</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		editUserInfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				userInfo: {
					userId: '1934293164587802625'
				},
				info: {}
			}
		},
		mounted() {

			const that = this

			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					if (res && res.data) {

						that.info = res.data

						this.getUserInfo()
					} else {
						uni.showToast({
							title: '用户未登录，请登录后重试！',
							icon: 'none',
							duration: 1000 // 显示 2 秒
						});

						setTimeout(() => {
							uni.switchTab({
								url: '/pages/userInfo/userInfo'
							});
						}, 800); // 等待时间 = Toast显示时间
					}
				},
				fail: (err) => {
					uni.showToast({
						title: '用户未登录，请登录后重试！',
						icon: 'none',
						duration: 1000 // 显示 2 秒
					});

					setTimeout(() => {
						uni.switchTab({
							url: '/pages/userInfo/userInfo'
						});
					}, 800); // 等待时间 = Toast显示时间
				}
			})

		},
		methods: {
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.form.avatar = res.tempFilePaths[0]
						// 你可以在这里调用上传接口
					}
				})
			},
			getUserInfo() {
				let param = {
					userId: this.info.userId
				}
				getUserInfo(param).then(res => {
					if (res && res.code === 200) {
						this.userInfo = res.data
					}
				})
			},
			submitForm() {
				let param = {
					...this.userInfo
				}
				editUserInfo(param).then(res => {
					if (res && res.code === 200) {
						uni.showToast({
							title: '编辑成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: res.message || '编辑失败', // 显示后端返回的错误信息
							icon: 'none',
							duration: 3000
						});
					}
				}).catch(err => {
					// 网络请求失败或接口异常（如 500 错误）
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none',
						duration: 3000
					});
					console.error('接口请求失败:', err);
				});

			}
		}
	}
</script>

<style>
	.profile-page {
		background-color: #fff;
		min-height: 100vh;
	}
</style>